<script setup name="ReportDetails">
import { reactive, onMounted, ref, nextTick } from "vue";
import { useRouter } from "vue-router";
import imgs from "@/assets/image/logo.jpg";
import htmltopdf from "@/untils/htmltopdf";
const router = useRouter();
const showDialog = ref(false);
const pdfLoading = ref(false);
// 小标题
const refdiviDercar = ref(null);
const refdiviDerBatter = ref(null);
const refdiviDerinfor = ref(null);
const refdetectResult = ref(null);

const state = reactive({
  detailsobj: JSON.parse(sessionStorage.getItem("details")),
  font: {
    fontSize: 16,
    color: "rgba(0, 0, 0, 0)",
  },
  colorObjs: {
    // A: "#0cb683",
    B: "#fec600",
    C: "#ff3b30",
    提醒: "#fec600",
    告警: "#ff3b30",
    // 通过: "#0cb683",
  },
  // 底盘
  detectResultobj: {
    pass: "通过",
    fail: "未通过",
    uncheck: "检测失败",
    null: "-",
  },
  arrs: [
    {
      itemName: "系统总电压超限检测",
      dec: "BMS总充电电压与其最高允许充电总电压与比较,前者需低于后者",
    },
    {
      itemName: "系统充电电流超限检测",
      dec: "BMS总充电电流与其最高允许充电总电流与比较，前者需低于后者",
    },
    {
      itemName: "系统电流采样精度检测",
      dec: "BMS电流值与设备输出电流值进行比较的百分值",
    },
    {
      itemName: "系统充电电流响应时间检测",
      dec: "设备电流非零的时间与BMS电流非零的时间比比较",
    },
    {
      itemName: "充电接口电压降检测",
      dec: "设备电压、BMS电压与BMS电流值的比较，该项目可判断充电口是否故障",
    },
    {
      itemName: "系统充电告警信息",
      dec: "充电过程中是否存在报警",
    },
    {
      itemName: "SOH",
      dec: "电池剩余容星比值",
    },
    {
      itemName: "SOC跳变",
      dec: "充电过程中SOC是否存在跳变，可大致判斯BMS策陷",
    },
    {
      itemName: "总线电压数据波动异常",
      dec: "BMS总电压是否存在异常波动",
    },
    {
      itemName: "总线电流数据波动异常",
      dec: "BNS总电流是百存在异常波动",
    },
  ],
  listarr: [
    "绝缘阻值",
    "动力蓄电池最高温度",
    "单体蓄电池最高电压",
    "系统充电告警信息",
  ],
  obditemList: [],
});
// 排序并处理值的显示
const handle = () => {
  let objs = {
    A: "通过",
    B: "提醒",
    C: "告警",
  };
  let one = 0;
  state.detailsobj?.obditemList.map((val, index) => {
    if (state.listarr.includes(val.itemName)) {
      val.index = one++;
      val.result = objs[val.result];
    } else {
      val.index = 5;
    }
  });
  state.detailsobj?.obditemList.sort((a, b) => {
    return a.index - b.index;
  });
  // console.log(state.detailsobj.obditemList, 8);
};
//导出pdf时需要调整的样式
const changeClass = () => {
  // 小标题
  refdiviDercar.value.state.styles.marginBottom = "-8px";
  refdiviDerBatter.value.state.styles.marginBottom = "-8px";
  refdiviDerinfor.value.state.styles.marginBottom = "-8px";
  refdetectResult.value.state.styles.marginBottom = "-8px";
};
const pdfButton = () => {
  pdfLoading.value = true;
  changeClass();
  setTimeout(() => {
    htmltopdf.getPdf("检测报告");
    // 小标题
    refdiviDercar.value.state.styles.marginBottom = "0px";
    refdiviDerBatter.value.state.styles.marginBottom = "0px";
    refdiviDerinfor.value.state.styles.marginBottom = "0px";
    refdetectResult.value.state.styles.marginBottom = "0px";
    pdfLoading.value = false;
  }, 1000);
};
onMounted(() => {
  nextTick(() => {
    handle();
  });
});
</script>
<template>
  <div style="height: 100vh">
    <top-title title="报告详情" @backbtn="router.go(-1)" />
    <div class="app_content report_details">
      <div id="pdfDom">
        <el-watermark
          class="watermark"
          :rotate="21"
          content="中国汽研"
          :font="state.font"
          :gap="[120, 260]"
          :offset="[0, 60]"
        >
          <div class="send_infor">
            <diviDer title="送检信息" ref="refdiviDerinfor" />
            <div class="send_infor_content">
              <div class="infor_top_flex">
                <span class="left_name">检测站点</span>
                <span class="right_val">{{
                  state.detailsobj?.organName || "-"
                }}</span>
              </div>
              <div class="infor_top_flex">
                <span class="left_name">检测设备编号</span>
                <span class="right_val">{{
                  state.detailsobj?.reportNum || "-"
                }}</span>
              </div>
              <div class="infor_top_flex">
                <span class="left_name">报告生成时间</span>
                <span class="right_val">{{
                  state.detailsobj?.reportEndTime || "-"
                }}</span>
              </div>
            </div>
          </div>
          <div class="send_infor car_infor">
            <diviDer title="车辆信息" ref="refdiviDercar" />
            <div class="send_infor_content">
              <div class="infor_top_flex">
                <span class="left_name">车牌号</span>
                <span class="right_val">{{
                  state.detailsobj?.carNum || "-"
                }}</span>
              </div>
              <div class="infor_top_flex">
                <span class="left_name">动力电池类型</span>
                <span class="right_val">{{
                  state.detailsobj?.jcCarBaseInfo?.powerBatterType || "-"
                }}</span>
              </div>
              <div class="infor_top_flex">
                <span class="left_name">动力电池标称容量</span>
                <span class="right_val">{{
                  state.detailsobj?.jcCarBaseInfo?.ratedCabattery || "-"
                }}</span>
              </div>
              <div class="infor_top_flex">
                <span class="left_name">动力电池标称(额定)电压</span>
                <span class="right_val">{{
                  state.detailsobj?.jcCarBaseInfo?.totalBatteryVoltage || "-"
                }}</span>
              </div>
            </div>
          </div>
          <div class="battery_infor">
            <!-- <diviDer title="电池检测项" /> -->
            <diviDer title="电池检测项" ref="refdiviDerBatter">
              <template v-slot:handle>
                <van-icon
                  name="question-o"
                  @click="() => (showDialog = true)"
                  size="1.3rem"
                  color="#4187f2"
                />
              </template>
            </diviDer>
            <div class="battery_infor_content">
              <div class="battery_infor_title">
                <span class="sp_left">检测项目</span>
                <span class="sp_center">结果</span>
                <span class="sp_right">测定值</span>
              </div>
              <div
                v-for="(item, index) in state.detailsobj?.obditemList"
                :key="index"
                class="battery_infor_title battery_infor_value"
              >
                <span class="sp_left">{{ item.itemName }}</span>
                <span
                  class="sp_center"
                  :style="{ color: state.colorObjs[item.result] }"
                  >{{ item.result }}</span
                >
                <span class="sp_right">{{ item.value }}</span>
              </div>
            </div>
          </div>
          <div class="send_infor">
            <diviDer title="底盘检测项" ref="refdetectResult" />
            <div class="send_infor_content">
              <div class="infor_top_flex">
                <span class="left_name">底盘检测结果</span>
                <span class="right_val">{{
                  state.detectResultobj[state.detailsobj?.detectResult]
                }}</span>
              </div>
            </div>
          </div>
          <div class="send_infor bottom_class">
            <p>免责声明：</p>
            <div>
              1.本评估结果基于报告日期检测的环境条件下的测试结果，不同环境下的检测结果可能有偏差。另因交通事故等原因导致车辆动力电池的工况发生变化，本评估报告不作为参考依据。<br />
              2.本结果仅对本次样本负责，仅供评估参考，不作为质量保证与安全承诺的依据，也不作为法律仲裁和其他用途。<br />
            </div>
          </div>
        </el-watermark>
      </div>
      <!-- <van-button
        color="#7ec050"
        style="margin: 10px 0px 15px 0px"
        block
        v-loading="pdfLoading"
        @click="pdfButton"
        >导出PDF</van-button
      > -->
      <van-button color="#1c4880" block @click="router.go(-1)">返回</van-button>

      <div class="image_logo">
        <van-image width="100%" height="100" fit="contain" :src="imgs" />
      </div>
    </div>
    <!-- 弹框 -->
    <van-dialog v-model:show="showDialog" confirmButtonText="关闭">
      <h3 class="titles">检测项目说明</h3>
      <div
        class="dialog_content"
        v-for="(item, index) in state.arrs"
        :key="index"
      >
        <div class="dialog_content_title">{{ item.itemName }}:</div>
        <div class="dialog_content_des">{{ item.dec }}</div>
      </div>
    </van-dialog>
  </div>
</template>
<style lang="scss" scoped>
:deep(.van-dialog__content) {
  box-sizing: border-box;
  padding: 10px 8px 5px 8px;
  .titles {
    text-align: center;
    margin-bottom: 5px;
  }
  .dialog_content {
    border-bottom: 1px solid #f5f5f5;
    margin-top: 5px;
    .dialog_content_title {
      font-size: 13px;
      font-weight: bold;
    }
    .dialog_content_des {
      font-size: 13px;
      color: #888888;
      // text-indent: 10px;
    }
  }
}
.report_details {
  height: calc(100vh - 66px);
  padding-bottom: 0px;
  overflow: auto;
  .send_infor {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 1px 1px 4px #888888;
    .send_infor_content {
      box-sizing: border-box;
      padding-top: 10px;
    }
    .infor_top_flex {
      display: flex;
      justify-content: space-between;
      flex-wrap: nowrap;
      box-sizing: border-box;
      padding: 0px 10px 5px 10px;
      &:last-child {
        padding-bottom: 15px;
      }
      .left_name {
        font-size: 13px;
        color: rgb(61, 58, 58);
      }
      .right_val {
        font-size: 13px;
        color: #b5afaf;
      }
    }
  }
  .car_infor {
    margin: 15px 0px;
  }
  .battery_infor {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 1px 1px 4px #888888;
    margin-bottom: 15px;
    .battery_infor_content {
      box-sizing: border-box;
      padding-top: 10px;
    }
    .battery_infor_title {
      display: flex;
      justify-content: space-between;
      padding: 0px 10px 5px 10px;
      span {
        font-size: 13px;
        color: rgb(61, 58, 58);
      }
      .sp_left {
        display: inline-block;
        width: 50%;
        // overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .sp_center {
        display: inline-block;
        width: 10%;
        // overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
      }
      .sp_right {
        display: inline-block;
        width: 25%;
        text-align: right;
        // overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .battery_infor_value {
      display: flex;
      justify-content: space-between;
      padding: 0px 10px 5px 10px;
      &:last-child {
        padding-bottom: 15px;
      }
      span {
        font-size: 13px;
        color: #b5afaf;
      }
    }
  }
  .bottom_class {
    box-sizing: border-box;
    box-shadow: none;
    padding: 5px;
    margin: 15px 0px;
    p {
      font-weight: bold;
      margin-bottom: 5px;
    }
  }
}
</style>
